<template>
  <div class="test-item-selection-section">
    <div class="common-title">
      <h1>土壤检测项目</h1>
      <p>SOIL TEST PROJECT</p>
    </div>
    <ul class="test-item-selection-ul clearfix">
      <li v-for="(item, index) in testItemSelectionList" :key="index">
        {{item.name}}
        <span>{{item.unit}}</span>
      </li>
    </ul>
    <div class="common-title">
      <h1>确认样本数</h1>
      <p>NUMBER OF CONFIMED SAMPLES</p>
    </div>
    <div class="test-item-selection-money">
      <div class="test-item-selection-money-top">
        <p>
          小计：
          <span>￥{{price | numFilter}} x</span>
        </p>
        <p>
          <van-field v-model="sampleNumber" label="样本数：" @change="sampleNumberChange()" />
        </p>
      </div>
      <div class="test-item-selection-money-number">
        合计：
        <span>￥{{totalPrice | numFilter}}</span>
      </div>
    </div>
    <div class="test-item-selection-btn" @click="goPay()">确定选项</div>
  </div>
</template>

<script>
import { testItems } from "@/api/common";
import { numFilter } from "@/filters/common";
export default {
  data() {
    return {
      fileList: [],
      testItemSelectionList: [],
      price: 399.0,
      totalPrice: 399.0,
      sampleNumber: 1,
    };
  },
  mounted() {
    this.getTestItems();
  },
  methods: {
    sampleNumberChange() {
      this.totalPrice = this.price * this.sampleNumber;
    },
    goPay() {
      if (this.sampleNumber <= 0) {
        this.$toast("样本数最少为1个");
        return;
      } else if (this.sampleNumber > 99) {
        this.$toast("样本数最多为99个");
        return;
      } else {
        this.$router.push({
          name: "purchase-information",
          query: {
            payment_amount_type: 1,
            sample_number: this.sampleNumber,
          },
        });
      }
    },
    getTestItems() {
      let data = {
        payment_amount_type: 1,
      };
      testItems(data)
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.testItemSelectionList = res.data.datas.data;
          }
        })
        .catch((error) => {
          this.$toast(error);
        });
    },
  },
  destroyed() {
    this.$toast.clear();
  },
  filters: {
    numFilter: numFilter,
  },
};
</script>

<style scoped>
.test-item-selection-section {
  width: 100%;
  padding-bottom: 65px;
  box-sizing: border-box;
}
.test-item-selection-banner {
  width: 100%;
}
.test-item-selection-ul {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.test-item-selection-ul li {
  float: left;
  margin-right: 10%;
  width: 45%;
  height: 47px;
  line-height: 47px;
  font-size: 16px;
  color: #666;
  border-bottom: 1px solid #ddd;
}
.test-item-selection-ul li span {
  color: #999;
}
.test-item-selection-ul li:nth-child(even) {
  margin-right: 0;
}

.test-item-selection-voucher {
  width: 93%;
  border-bottom: 1px solid #ddd;
  margin: 0 auto;
  padding: 25px 0;
  box-sizing: border-box;
}
.test-item-selection-voucher p {
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}
.test-item-selection-money {
  width: 100%;
  padding: 25px 15px 30px;
  box-sizing: border-box;
}
.test-item-selection-money-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.test-item-selection-money-top p {
  font-size: 16px;
  color: #333;
  width: 50%;
}
.test-item-selection-money-top p >>> .van-cell {
  padding: 0 !important;
}
.test-item-selection-money-top >>> .van-field__control {
  height: 30px;
  padding-left: 10px;
  border: 1px solid #dcdcdc;
}
.test-item-selection-money-number {
  font-size: 16px;
  color: #333;
}
.test-item-selection-money-number span {
  color: #ef273a;
  font-size: 18px;
}
.test-item-selection-btn {
  width: 80%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #39a794;
  margin: 0 auto;
  display: block;
  color: #fff;
  border-radius: 30px;
  border: 0;
}
.test-item-selection-voucher >>> .van-uploader {
  width: 100px;
  height: 100px;
  border: 1px solid #4bca98;
}
.test-item-selection-voucher img {
  width: 100%;
  height: 100%;
}
</style>
